<template>
  <h2>业务1：鼠标坐标</h2>
  <h3>{{ mouse }}</h3>
</template>

<script>
import { reactive } from 'vue'

// 业务1：鼠标坐标
const useMouse = () => {
  // 定义响应式对象
  const mouse = reactive({ x: 0, y: 0 })
  // 给文档绑定鼠标移动事件
  document.addEventListener('mousemove', event => {
    // console.log(event)
    // 获取鼠标坐标值
    const { pageX, pageY } = event
    // 赋值给响应式对象
    mouse.x = pageX
    mouse.y = pageY
  })
  // 返回响应式对象用于页面绑定
  return { mouse }
}

export default {
  setup() {
    // 业务1：鼠标坐标封装
    const { mouse } = useMouse()

    // 返回给模板使用
    return { mouse }
  },
}
</script>

<style></style>
